<!--
 * @Description: 
 * @Author: hanyu
 * @Date: 2022-03-09 02:32:29
 * @LastEditTime: 2022-03-24 15:58:34
 * @LastEditors: hanyu
-->
<template>
    <div ref="dom" class="chart-box" @click="onPage"></div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment'
import { on, off } from '@/lib/utils';
export default {
  // 柱状图
  name: 'chartBar',
  props: {
    // map类型 keys 为图表x轴 values 为图表y轴数据
    value: {
      type: Array,
      require: true
    },
    dateType: {
      type: String,
      default: 'day'
    },
  },
  data() {
    return {
      dom: null
    };
  },
  watch: {
    value: {
      handler(e) {
        if (e) {
          this.setChart()
        }
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    onPage() {
      this.$router.push({
        name: 'WebData'
      })
    },
    getWeek(date) { // 参数时间戳
      let week = moment(date).day()
      switch (week) {
        case 1:
          return '周一'
        case 2:
          return '周二'
        case 3:
          return '周三'
        case 4:
          return '周四'
        case 5:
          return '周五'
        case 6:
          return '周六'
        case 0:
          return '周日'
      }
    },
    setChart() {
      this.$nextTick(() => {
        let xAxisData = this.value.map((item) => {
          // let value = ''
          // switch (this.dateType) {
          //   case 'day':
          //     value = item.day.slice(5, 10)
          //     break;
          //   case 'week':
          //     value = this.getWeek(item.day)
          //     break;
          //   case 'month':
          //     value = Number(item.month.slice(5,7)) + '月'
          //     break;
          //   default:
          //     value = item.season + '季度'
          //     break;
          // }
          return item.time
        })
        let data = this.value.map((aitem) => { return aitem.num })
        let yData = []
        for (let item of data) {
          let obj = {
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FCEBBB',
              color: '#0064ee'
            },
            value: item
          }
          yData.push(obj)
        }
        let option = {
          color: ['#FCEBBB'],
          grid: {
            left: '17%',
            bottom: '18%'
          },
          tooltip: {
            show: true,
          },
          xAxis: {
            type: 'category',
            data: xAxisData,
            axisLabel: {
              show: true,
              color: '#ffffff',
              fontSize: 14,
              interval: 0,
            },
            axisLine: {
              show: false,
            },
            nameTextStyle: {
              fontSize: 14
            },
            axisTick: {
              show: false,
              interval: false
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: '#ffffff',
              fontSize: 14
            },
          },
          series: [
            {
              data: yData,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.dom = echarts.init(this.$refs.dom);
        this.dom.setOption(option);
        on(window, 'resize', this.resize);
      });

    },
    resize() {
      this.dom.resize();
    }
  },
  mounted() {
  },
  beforeDestroy() {
    off(window, 'resize', this.resize);
  }
};
</script>

<style lang='less' scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>